<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 目录树 -->
      <el-col :lg="4" :md="5" :sm="6" :xs="24" class="mb-[12px] !pr-0">
        <datareport-preview-tree
          v-model="searchParam.directoryId"
          @node-click="search"
        />
      </el-col>
      <el-col :lg="20" :md="19" :sm="18" :xs="24">
        <div v-if="showSearch" class="search-container">
          <CommonSearch
            :formConfig="searchColumns"
            :inline="true"
            labelWidth="auto"
            formItemWidth="auto"
            :model="searchParam"
          >
            <template #after>
              <el-button type="primary" @click="search">
                <i-ep-search />
                搜索
              </el-button>
              <el-button @click="reset">
                <i-ep-refresh />
                重置
              </el-button>
            </template>
          </CommonSearch>
        </div>

        <el-card
          shadow="never"
          v-loading="loading"
          class="table-container table-container-scroll"
        >
          <el-empty
            v-if="!tableData.length && !loading"
            :image-size="200"
            :image="pic3"
          />
          <ul v-if="tableData.length && !loading">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              @click="jumpFineReport(item)"
            >
              <div class="card-item">
                <img :src="pic2" />
                <el-tooltip
                  v-if="item.reportName.length > 15"
                  :content="item.reportName"
                  effect="customized"
                >
                  <span class="alias oneLine">{{ item.reportName }}</span>
                </el-tooltip>
                <span v-else class="alias oneLine">{{ item.reportName }}</span>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import pic2 from "@/assets/images/document2.png";
import pic3 from "@/assets/images/noData2.png";
import { useTable } from "@/utils/useTable";
import router from "@/router/index";

defineOptions({
  name: "SYSTEMDATABOARDMANAGE",
  inheritAttrs: false,
});

/** 自定义设置方法   start **/

// 搜索参数 设置为响应式
const searchColumns: any = reactive([
  {
    type: "input", // 普通输入框
    isShow: true,
    inputType: "text", // 类型, text/textarea
    label: "报表编号", // 标签文本
    fieldName: "reportCode", // 字段名称
    placeholder: "请输入报表编号", // 提示文字
    initValue: "", // 默认值
  },
  {
    type: "input", // 普通输入框
    isShow: true,
    inputType: "text", // 类型, text/textarea
    label: "报表名称", // 标签文本
    fieldName: "reportName", // 字段名称
    placeholder: "请输入报表名称", // 提示文字
    initValue: "", // 默认值
  },
]);

// 是否显示搜索框
const showSearch = ref(true);

/** 列表项自定义方法   end **/

// 请求参数
const requestApi = "/dmpAdmin/dmpdatareportinfo/list";

// 是否需要分页
const pagination = false;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  reportCode: "",
  reportName: "",
  directoryId: "",
};

const deleteParam = {
  api: "",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const { tableData, searchParam, getTableList, search, reset, loading }: any =
  useTable(
    requestApi,
    initParam,
    searchParamInit,
    pagination,
    dataCallBack.value,
    requestError,
    deleteParam
  );

onMounted(() => {
  getTableList();
});

function jumpFineReport(item: any) {
  if (item.reportUrl.startsWith("http")) {
    window.open(item.reportUrl);
  } else {
    router.push({
      name: "CustomFineReport",
      query: {
        viewlet: item.reportUrl || item.reportName,
        id: item.id,
      },
    });
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    padding-right: 10px !important;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  li {
    display: inline-block;
    width: 120px;
    flex-grow: 1;
    cursor: pointer;
    margin: 10px;
    max-width: 140px;
    // box-shadow: 0px 2px 3px rgba(147, 197, 253, 0.1);
    .card-item {
      text-align: center;
      overflow: hidden;
      img {
        width: 63px;
        transform: scale(1);
        transition: all 0.4s;
        margin: 15px auto 0px;
        padding: 10px;
        background: aliceblue;
        border-radius: 8px;
      }
      span {
        font-size: 13px;
        color: #666;
        display: block;
        margin-bottom: 15px;
        margin-top: 3px;
        padding: 0 5px;
      }
    }
  }
  li:hover {
    cursor: pointer;
    img {
      transform: scale(1.12);
    }
  }
}

.table-container-scroll {
  height: calc(100vh - 200px);
  overflow-y: auto !important;
  :deep(.el-card__body) {
    padding: 10px !important;
  }
}
</style>
